<template>
  <div class="param">
    <div class="tops">
      <div class="labels">
        <span>参数名 </span>
        <input
          type="text"
          placeholder="参数名"
          class="ipts"
          v-model="nameipt"
          @input="(e) => changes('名字', e)"
        />
      </div>
      <div class="labels">
        <span>用户操作 </span>
        <input
          type="text"
          placeholder="用户操作"
          class="ipts"
          v-model="useript"
          @input="(e) => changes('操作', e)"
        />
      </div>
      <el-button type="primary" :icon="Search" @click="search()"
        >搜索</el-button
      >
      <el-button
        type="primary"
        :icon="Delete"
        color="white"
        border="true"
        @click="emptys()"
        >清空</el-button
      >
    </div>
    <avue-crud
      :option="option"
      :data="data"
      ref="crud"
      v-model:page="page"
      @on-load="onLoad"
      @selection-change="selectionChange"
    >
    </avue-crud>
  </div>
</template>
<script  lang="ts" setup>
import { useCounterStore } from "../../../../store/index.ts";
import { Delete, Edit, Search, Share, Upload } from "@element-plus/icons-vue";
import {
  ref,
  onBeforeMount, // 在组件挂载之前执行的函数
  onMounted,
  onBeforeUpdate, // 在组件修改之前执行的函数
  onUpdated,
  onBeforeUnmount, // 在组件卸载之前执行的函数
  onUnmounted,
} from "vue";

const store = useCounterStore();

let data: any = ref(store.list);
let page_sum = ref(0);
let page: any = {
  pageSize: 2,
  pageSizes: [2, 5, 10, 15, 20],
};
const option: any = {
  border: true,
  addBtn: false,
  selection: true,
  reserveSelection: true,
  delBtn: false,
  editBtn: false,
  refreshBtn: false,
  align: "center",
  menuAlign: "center",
  column: [
    {
      label: "用户名",
      prop: "username",
    },
    {
      label: "用户操作",
      prop: "operation",
    },
    {
      label: "请求方法",
      prop: "method",
    },
    {
      label: "请求参数",
      prop: "params",
    },
    {
      label: "执行时长(毫秒)",
      prop: "time",
    },
    {
      label: "IP地址",
      prop: "ip",
    },
    {
      label: "创建时间",
      prop: "createDate",
    },
  ],
};
let nameipt = "";
let useript = "";

const addAgePatch = (data) => {
  store.$patch({
    list: data,
  });
};

const getList = () => {
  axios({
    method: "get",
    url: `https://yami-admin-api.yiluxdeng.com/sys/log/page?${new Date().getTime()}&current=1&size=10`,
    headers: {
      Authorization:
        "b9z1ZoWDim/AxMjOFy5m1ngFzaOni5SLpWJljf2ponwup+Ia5dmVetciuUGDmF+G",
    },
  }).then((res) => {
    page_sum.value = res.data.total;
    addAgePatch(res.data.records);
  });
};
const search = () => {
  axios({
    method: "get",
    url: ` https://yami-admin-api.yiluxdeng.com/sys/log/page?t=1669074148071&current=1&size=10&username=${nameipt}&operation=${useript}`,
    headers: {
      Authorization:
        "b9z1ZoWDim/AxMjOFy5m1ngFzaOni5SLpWJljf2ponwup+Ia5dmVetciuUGDmF+G",
    },
  }).then((res) => {
    data.value = res.data.records;
    addAgePatch(res.data.records);
  });
};
const emptys = () => {
  nameipt = "3";
  useript = "4";
};

const changes = (value: string, e: any) => {
  if (value == "名字") {
    nameipt = e.target.value;
  } else if (value == "操作") {
    useript = e.target.value;
  } else {
    return;
  }
};

onMounted(() => {
  getList();
});
const onLoad = (page: any) => {
  //+
  axios({
    method: "get",
    url: `https://yami-admin-api.yiluxdeng.com/sys/log/page?t=${new Date().getTime()}&current=${
      page.currentPage
    }&size=${page.pageSize}`,
    headers: {
      Authorization:
        "b9z1ZoWDim/AxMjOFy5m1ngFzaOni5SLpWJljf2ponwup+Ia5dmVetciuUGDmF+G",
    },
  }).then((res) => {
    data.value = res.data.records;
  });

  page.total = page_sum;
};
const selectionChange = (list) => {};
</script>

<style scoped>
.labels .ipts {
  padding-left: 10px;
  box-sizing: border-box;
}
.labels {
  width: 25%;
  padding-left: 10px;
  box-sizing: border-box;
  display: inline-block;
}
.labels > input {
  padding: 10px 0px;
}
.param {
  background: white;
  width: 95%;
  height: 900px;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: scroll;
}
.tops {
  width: 100%;
  margin-bottom: 10px;
}
.vla {
  width: 200px;
  height: 200px;
  background: green;
}
</style>